<template>
	<div class="zh-table" :class="tableClass" style="height: 100%">
		<vxe-grid
			v-if="type === 'default'"
			ref="zhGrid"
			:id="id"
			class="vxe-table-antd"
			:auto-resize="autoResize"
			:sync-resize="syncResize"
			:border="border"
			:span-method="spanMethod"
			:scroll-y="scrollY"
			:columns="columns"
			:data="tableData"
			:resizable="resizable"
			:stripe="stripe"
			:size="size"
			:loading="loading"
			:align="align"
			:height="height"
			:max-height="maxHeight"
			:showFooter="showFooter"
			:checkbox-config="{
				...checkboxConfig,
				reserve: true,
				highlight: true,
				checkMethod: onCheckMethod,
			}"
			:radio-config="{
				...radioConfig,
				reserve: true,
				highlight: true,
				checkMethod: onCheckMethod,
			}"
			:round="round"
			:footer-align="footerAlign"
			:header-align="headerAlign"
			:highlight-hover-row="highlightHoverRow"
			:highlight-current-row="highlightCurrentRow"
			:highlight-hover-column="highlightHoverColumn"
			:highlight-current-column="highlightCurrentColumn"
			:edit-rules="editRules"
			:show-header="showHeader"
			:showOverflow="showOverflow"
			:showHeaderOverflow="showHeaderOverflow"
			:show-footer-overflow="showFooterOverflow"
			:row-id="rowId"
			:header-cell-class-name="headerCellClassName"
			:row-class-name="rowClassName"
			:cell-class-name="cellClassName"
			:header-cell-style="headerCellStyle"
			:row-style="rowStyle"
      :row-config="rowConfig"
			:cell-style="cellStyle"
			:keepSource="disabled ? false : keepSource"
			:edit-config="disabled ? {} : editConfig ? editConfig : { trigger: 'click', mode: 'cell', showStatus: true, autoClear: false, activeMethod: activeRowMethod, }"
			:tooltip-config="tooltipConfig"
			:toolbar-config="theToolbarConfig"
			:sort-config="sortConfig"
			@checkbox-change="checkboxChange"
			@checkbox-all="checkboxAll"
			@cell-click="cellClick"
			@cell-dblclick="cellDbclick"
			@radio-change="radioChange"
			@current-change="currentChange"
			@sort-change="sortChange"
			:export-config="exportConfig"
			@edit-closed="onEditClosed"
      @filter-change="filterChangeEvent"
		>
			<slot name="bottom" slot="bottom"></slot>
			<slot name="empty" slot="empty"></slot>
			<slot name="top" slot="top"></slot>
			<!--自定义列操作插槽-->
			<template
				:slot="item.name"
				slot-scope="itemData"
				v-for="(item, index) in slotList"
				v-key="index"
			>
				<slot
					v-if="item.type === 'default' || item.type === 'edit'"
					:name="item.name"
					:row="itemData.row"
					:rowIndex="itemData.rowIndex"
				></slot>
				<slot
					v-if="item.type === 'header'"
					:name="item.name"
					:column="itemData.column"
					:columnIndex="itemData.columnIndex"
				></slot>
				<slot
					v-if="item.type === 'footer'"
					:name="item.name"
					:items="itemData.items"
					:column="itemData.column"
					:columnIndex="itemData.columnIndex"
					:$columnIndex="itemData.$columnIndex"
					:_columnIndex="itemData._columnIndex"
					:$rowIndex="itemData.$rowIndex"
				></slot>
				<slot
					v-if="item.type === 'filter'"
					:name="item.name"
					:column="itemData.column"
					:columnIndex="itemData.columnIndex"
					:$columnIndex="itemData.$columnIndex"
					:_columnIndex="itemData._columnIndex"
					:$panel="itemData.$panel"
				></slot>
			</template>
			<!--自定义插槽 toolbar buttons 插槽-->
			<template #toolbar_buttons>
				<span class="zh-table-title">{{ title }}</span>
			</template>
			<!--自定义插槽 toolbar tools 插槽-->
			<slot name="toolbar_tools" slot="toolbar_tools"></slot>
		</vxe-grid>
		<vxe-grid
			v-if="type === 'paging'"
			ref="zhGrid"
			:id="id"
			class="vxe-table-antd"
			:auto-resize="autoResize"
			:sync-resize="syncResize"
			:border="border"
			:span-method="spanMethod"
			:scroll-y="scrollY"
			:resizable="resizable"
			:stripe="stripe"
			:size="size"
			:loading="loading"
			:align="align"
			:height="height"
			:showFooter="showFooter"
			:checkbox-config="{
				...checkboxConfig,
				reserve: true,
				highlight: true,
				checkMethod: onCheckMethod,
			}"
			:radio-config="{
				...radioConfig,
				reserve: true,
				highlight: true,
				checkMethod: onCheckMethod,
			}"
			:columns="columns"
			:data="tableData"
			:round="round"
			:header-align="headerAlign"
			:footer-align="footerAlign"
			:highlight-hover-row="highlightHoverRow"
			:highlight-current-row="highlightCurrentRow"
			:highlight-hover-column="highlightHoverColumn"
			:highlight-current-column="highlightCurrentColumn"
			:edit-rules="editRules"
			:show-header="showHeader"
			:showOverflow="showOverflow"
			:showHeaderOverflow="showHeaderOverflow"
			:show-footer-overflow="showFooterOverflow"
			:row-id="rowId"
			:header-cell-class-name="headerCellClassName"
			:row-class-name="rowClassName"
			:cell-class-name="cellClassName"
			:header-cell-style="headerCellStyle"
			:row-style="rowStyle"
      :row-config="rowConfig"
			:cell-style="cellStyle"
			:keepSource="disabled ? false : keepSource"
			:edit-config="
				disabled
					? {}
					: editConfig
					? editConfig
					: {
							trigger: 'click',
							mode: 'cell',
							showStatus: true,
							autoClear: false,
							activeMethod: activeRowMethod,
					  }
			"
			:seq-config="{
				startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,
			}"
			:tooltip-config="tooltipConfig"
			:toolbar-config="theToolbarConfig"
			:sort-config="sortConfig"
			@checkbox-change="checkboxChange"
			@checkbox-all="checkboxAll"
			@cell-click="cellClick"
			@cell-dblclick="cellDbclick"
			@radio-change="radioChange"
			@current-change="currentChange"
			@sort-change="sortChange"
			:export-config="exportConfig"
			@edit-closed="onEditClosed"
      :filter-config="filterConfig"
      @filter-change="filterChangeEvent"
		>
			<template #pager>
				<vxe-pager
					:layouts="layouts"
					:current-page.sync="tablePage.currentPage"
					:page-size.sync="tablePage.pageSize"
					:total="tablePage.total"
					:page-sizes="pagerConfig.pageSizes"
					@page-change="handlePageChange"
				>
					<template v-if="showPageLeft" #left>
						<span class="page-left">
<!--							<a-checkbox
								style="font-size: 18px"
								:indeterminate="isIndeterminate"
								v-model="isAllChecked"
								@change="changeAllEvent"
							>
							</a-checkbox>
							<span style="padding-left: 10px">全表全选</span>-->
							<span style="padding-left: 10px"
								>已选中 {{ count }} 条</span
							>
						</span>
					</template>
				</vxe-pager>
			</template>
			<slot name="bottom" slot="bottom"></slot>
			<slot name="empty" slot="empty"></slot>
			<slot name="top" slot="top"></slot>
			<!--自定义操作插槽-->
			<template
				:slot="item.name"
				slot-scope="itemData"
				v-for="(item, index) in slotList"
				v-key="index"
			>
				<slot
					v-if="item.type === 'default' || item.type === 'edit'"
					:name="item.name"
					:row="itemData.row"
					:rowIndex="itemData.rowIndex"
				></slot>
				<slot
					v-if="item.type === 'header'"
					:name="item.name"
					:column="itemData.column"
					:columnIndex="itemData.columnIndex"
				></slot>
				<slot
					v-if="item.type === 'footer'"
					:name="item.name"
					:items="itemData.items"
					:column="itemData.column"
					:columnIndex="itemData.columnIndex"
					:$columnIndex="itemData.$columnIndex"
					:_columnIndex="itemData._columnIndex"
					:$rowIndex="itemData.$rowIndex"
				></slot>
				<slot
					v-if="item.type === 'filter'"
					:name="item.name"
					:column="itemData.column"
					:columnIndex="itemData.columnIndex"
					:$columnIndex="itemData.$columnIndex"
					:_columnIndex="itemData._columnIndex"
					:$panel="itemData.$panel"
				></slot>
			</template>

			<!--自定义插槽 toolbar buttons 插槽-->
			<template #toolbar_buttons>
				<span class="zh-table-title">{{ title }}</span>
			</template>
			<!--自定义插槽 toolbar tools 插槽-->
			<slot name="toolbar_tools" slot="toolbar_tools"></slot>
		</vxe-grid>
	</div>
</template>
<script>
	import { uuid } from '@/utils/util';

	export default {
		name: 'ZhTable',
		props: {
			//默认 default paging 分页
			type: {
				type: String,
				default: 'paging',
			},
			//标题
			title: {
				type: String,
				default: null,
			},
			//是否可编辑
			disabled: {
				type: Boolean,
				default: true,
			},
			//是否淡颜色
			light: {
				type: Boolean,
				default: true,
			},
			//是否显示阴影
			shadow: {
				type: Boolean,
				default: false,
			},
			//请求数据的url
			url: {
				type: String,
				default: '',
			},
			columns: {
				type: Array,
				default: function () {
					return [];
				},
				require: true,
			},
			data: {
				type: Array,
				default: function () {
					return null;
				},
			},
			//是否带有边框default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
			border: {
				type: [Boolean, String],
				default: 'none',
			},
			spanMethod:{
				type: Function,
			},
			scrollY:{
				type:Object
			},
			// 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）boolean
			autoResize: {
				type: Boolean,
				default: false,
			},
			// 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来控制显示/隐藏切换时可能会用到）boolean | string | number
			syncResize: {
				type: [Boolean, String, Number],
				default: undefined,
			},
			//所有的列是否允许拖动列宽调整大小
			resizable: {
				type: Boolean,
				default: false,
			},
			//是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式）
			stripe: {
				type: Boolean,
				default: true,
			},
			//表格的尺寸medium, small, mini
			size: {
				type: String,
				default: undefined,
			},
			exportConfig: {
				type: Object,
				default: function () {
					return {
						// 默认选中类型
						type: 'xlsx',
						// 自定义类型
						types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
					};
				},
			},
			//所有的列对齐方式 left（左对齐）, center（居中对齐）, right（右对齐）
			align: {
				type: String,
				default: 'center',
			},
			//表格的高度；支持铺满父容器或者固定高度，如果设置 auto 为铺满父容器（如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素）auto, %, px
			height: {
				type: [Number, String],
				default: '600px',
			},
			// 表格的最大高度 %, px
			maxHeight: {
				type: [Number, String],
				default: undefined,
			},
			//是否为圆角边框
			round: {
				type: Boolean,
				default: false,
			},
			//所有的表头列的对齐方式left（左对齐）, center（居中对齐）, right（右对齐）
			headerAlign: {
				type: String,
				default: 'center',
			},
			//left（左对齐）, center（居中对齐）, right（右对齐）
			footerAlign: {
				type: String,
				default: 'center',
			},
			//鼠标移到行是否要高亮显示
			highlightHoverRow: {
				type: Boolean,
				default: true,
			},
			//是否要高亮当前行
			highlightCurrentRow: {
				type: Boolean,
				default: true,
			},
			//鼠标移到列是否要高亮显示
			highlightHoverColumn: {
				type: Boolean,
				default: true,
			},
			//是否要高亮当前列
			highlightCurrentColumn: {
				type: Boolean,
				default: true,
			},
			//是否显示表头
			showHeader: {
				type: Boolean,
				default: true,
			},
			//设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度） ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）
			showOverflow: {
				type: [Boolean, String],
				default: true,
			},
			//设置表头所有内容过长时显示为省略号 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）
			showHeaderOverflow: {
				type: [Boolean, String],
				default: true,
			},
			//设置表尾所有内容过长时显示为省略号ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）
			showFooterOverflow: {
				type: [Boolean, String],
				default: true,
			},
			//自定义行数据唯一主键的字段名（行数据必须要有唯一主键，默认自动生成）
			rowId: {
				type: String,
				default: '_XID',
			},
      rowConfig: {
        type: Object,
        default: () => {
          return {}
        },
      },
			//保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
			keepSource: {
				type: Boolean,
				default: true,
			},
			editConfig: {
				type: Object,
				default: function () {
					return undefined;
				},
			},
			showFooter: {
				type: Boolean,
				default: false,
			},
			pagerConfig: {
				type: Object,
				default: function () {
					return {
						pageSize: 200,
						pageSizes: [200, 500, 1000, 5000, 10000],
					};
				},
			},
			// 单选框配置项
			radioConfig: {
				type: Object,
				default: () => {
					return undefined;
				},
			},
			// 复选框配置项
			checkboxConfig: {
				type: Object,
				default: () => {
					return undefined;
				},
			},
			editRules: {
				type: Object,
				default: function () {
					return {};
				},
			},
			tooltipConfig: {
				type: Object,
				default: function () {
					return {
						showAll: false,
						theme: 'light',
						enterable: false,
						leaveDelay: 300,
					};
				},
			},
			toolbarConfig: {
				type: Object,
				default: function () {
					return null;
				},
			},
			sortConfig: {
				type: Object,
				default: function () {
					return {
						remote: false,
					};
				},
			},
			orderByList: {
				type: Array,
				default: function () {
					return [];
				},
			},
			layouts: {
				type: Array,
				default: function () {
					return [
						'Sizes',
						'PrevJump',
						'PrevPage',
						'Number',
						'NextPage',
						'NextJump',
						'FullJump',
						'PageCount',
						'Total',
					];
				},
			},
			headerCellClassName: {
				type: [Function, String],
				default: 'table-header',
			},
			rowClassName: {
				type: [Function, String],
			},
			cellClassName: {
				type: [Function, String],
			},
			headerCellStyle: {
				type: Function,
			},
			rowStyle: {
				type: Function,
			},
			cellStyle: {
				type: Function,
			},
			allCheckedFlag: {
				type: Boolean,
				default: true,
			},
      filterConfig: {
        type: Object,
        default: () => {
          return undefined
        },
      }
		},
		data() {
			return {
				id: uuid(),
				loading: false,
				tablePage: {
					total: 0,
					pageNum: 1,
					currentPage: 1,
					pageSize: this.pagerConfig.pageSize
						? this.pagerConfig.pageSize
						: 20,
				},
				tableData: [],
				allData: [],
				queryParam: {},
				timeout: null,
				isAllChecked: false,
				isIndeterminate: false,
				selectRecords: [],
				selectRow: null,
				count: 0,
				showPageLeft: false,
				slotList: [],
				orderList: this.orderByList,
			};
		},
		computed: {
			tableClass() {
				let tableClass = [];
				if (this.shadow) {
					tableClass.push('zh-table-shadow');
				}
				if (this.light) {
					tableClass.push('zh-table-light');
				}
				return tableClass;
			},
			theToolbarConfig() {
				return this.getToolbarConfig();
			},
      collapsed(){
        // return this.$store.state.setting.collapsed
      }
		},
		created() {
			if (this.data) {
				this.setData(this.data);
			}
			if (this.columns) {
				this.setShowPageLeft(this.columns);
				this.getSlotList(this.columns);
			}
		},
		watch: {
			data(list) {
				if (list) {
					this.setData(list);
				}
			},
			columns(list) {
				this.getSlotList(list);
				if (list && list.length > 0) {
					this.setShowPageLeft(list);
				} else {
					this.showPageLeft = false;
				}
			},
      collapsed(){
        this.refreshColumn(200)
      }
		},
		methods: {
			getToolbarConfig() {
				let toolbarConfig = {};
				if (this.toolbarConfig) {
					toolbarConfig = Object.assign({}, this.toolbarConfig);
				}
				if (this.title) {
					let slots = toolbarConfig.slots;
					if (!slots) {
						slots = {};
					}
					slots.buttons = 'toolbar_buttons';
					toolbarConfig.slots = slots;
				} else {
					if (!this.toolbarConfig) {
						toolbarConfig = null;
					}
				}
				return toolbarConfig;
			},
			setShowPageLeft(list) {
				let size = list.length;
				let allCheckedFlag = this.allCheckedFlag;
				for (let i = 0; i < size; i++) {
					let item = list[i];
					if (item.type === 'checkbox' && allCheckedFlag) {
						this.showPageLeft = true;
						break;
					}
				}
			},
			getSlotList(list) {
				let size = list.length;
				let slotList = [];
				for (let i = 0; i < size; i++) {
					let item = list[i];
					if (item.slots) {
						if (
							item.slots.default &&
							this.isString(item.slots.default)
						) {
							let slot = {};
							slot.type = 'default';
							slot.name = item.slots.default;
							slotList.push(slot);
						}
						if (
							item.slots.header &&
							this.isString(item.slots.header)
						) {
							let slot = {};
							slot.type = 'header';
							slot.name = item.slots.header;
							slotList.push(slot);
						}
						if (
							item.slots.footer &&
							this.isString(item.slots.footer)
						) {
							let slot = {};
							slot.type = 'footer';
							slot.name = item.slots.footer;
							slotList.push(slot);
						}
						if (
							item.slots.filter &&
							this.isString(item.slots.filter)
						) {
							let slot = {};
							slot.type = 'filter';
							slot.name = item.slots.filter;
							slotList.push(slot);
						}
						if (item.slots.edit && this.isString(item.slots.edit)) {
							let slot = {};
							slot.type = 'edit';
							slot.name = item.slots.edit;
							slotList.push(slot);
						}
					}
					if (item.children && item.children.length > 0) {
						this.getSlotList(item.children);
					}
				}
				let retSlotList = this.slotList.concat(slotList);
				this.slotList = retSlotList;
			},
			isString(str) {
				return typeof str === 'string' && str.constructor === String;
			},
			handlePageChange({ type, currentPage, pageSize }) {
        if (type === 'size') {
          this.count = 0
          this.$refs.zhGrid.clearCheckboxReserve()
        }
        this.pageChange(currentPage, pageSize).then((vim) => {
					if (vim.isAllChecked) {
						vim.setAllCheckboxRow(vim.isAllChecked);
					}
					setTimeout(() => {
						vim.$refs.zhGrid.scrollTo(0, 0);
					}, 100);
          this.$emit('page-change', vim);
				});
			},
			pageChange(currentPage, pageSize) {
				return new Promise((resolve, reject) => {
					this.tablePage.pageNum = currentPage;
					this.tablePage.currentPage = currentPage;
					this.tablePage.pageSize = pageSize;
					if (this.url) {
						this.findTableList().then((res) => {
							resolve(res);
						});
					} else {
						this.setTableList().then((res) => {
							resolve(res);
						});
					}
				});
			},
			query(queryParam, url, timeout) {
			  debugger
        console.log('query', queryParam)
        return new Promise((resolve, reject) => {
          this.tablePage.pageNum = 1;
          this.tablePage.currentPage = 1;
          if (url) {
            this.url = url;
          }
          if (queryParam) {
            this.queryParam = queryParam;
          }
          if (timeout) {
            this.timeout = timeout;
          }
          this.isAllChecked = false;
          if (this.showPageLeft) {
            this.clearCheckboxRow();
            this.clearCheckboxReserve();
          }
          this.clearCurrentRow();
          this.clearSelected();
          this.clearRadioRow();
          this.clearRadioReserve();
          this.findTableList().then((vim) =>{
            resolve(vim);
          });
          setTimeout(() => {
            this.$refs.zhGrid.scrollTo(0, 0);
          }, 100);
        })
			},
			refresh(queryParam) {
				if (queryParam) {
					this.queryParam = queryParam;
				}
				this.isAllChecked = false;
				if (this.showPageLeft) {
					this.clearCheckboxRow();
					this.clearCheckboxReserve();
				}
				this.clearCurrentRow();
				this.clearSelected();
				this.clearRadioRow();
				this.clearRadioReserve();
				this.findTableList();
			},
			setData(data) {
				this.allData = data;
				//this.clearCheckboxReserve()
				//this.clearRadioReserve()
				if (this.type === 'paging') {
					this.setTableList();
				} else {
					this.tableData = data;
				}
				setTimeout(() => {
					this.$refs.zhGrid.scrollTo(0, 0);
				}, 100);
			},
			updateRow(row) {
				const data = [...this.tableData];
				let i;
				data.forEach((item, index, arr) => {
					if (item[this.rowId] === row[this.rowId]) {
						i = index;
						arr.splice(index, 1, row);
						return item;
					}
				});
				this.tableData = data;
			},
			setTableList() {
				return new Promise((resolve, reject) => {
					this.tablePage.total = this.allData.length;
					this.tableData = this.allData.slice(
						(this.tablePage.currentPage - 1) *
							this.tablePage.pageSize,
						this.tablePage.currentPage * this.tablePage.pageSize
					);
					resolve(this);
				});
			},
			findTableList() {
				return new Promise((resolve, reject) => {
					this.loading = true;
					let params = this.queryParam;
					if (this.type === 'paging') {
						params = Object.assign(params, this.tablePage);
					}
					let vim = this;
					this.$http
						.post(this.url, params, this.timeout)
						.then((res) => {
							let data = [];
							if (this.type === 'paging') {
								data = res.result.list;
							} else {
								if (res.result.list) {
									data = res.result.list;
								} else {
									data = res.result;
								}
							}
							// console.log(data)
							this.tableData = [].concat(data)
							this.tablePage.total = res.result.total;
							this.$emit('update:total', this.tablePage.total)
							this.tablePage.pageNum = res.result.pageNum;
							this.tablePage.currentPage = res.result.pageNum;
							this.tablePage.pageSize = res.result.pageSize;
							this.loading = false;
							if (data && data.length > 0) {
								resolve(this);
							} else {
								if (res.result.pageNum > 1) {
									params.pageNum = res.result.pages;
									this.loading = true;
									this.$http
										.post(this.url, params)
										.then((res) => {
											vim.tableData = res.result.list;
											vim.tablePage.total =
												res.result.total;
											vim.tablePage.pageNum =
												res.result.pageNum;
											vim.tablePage.currentPage =
												res.result.pageNum;
											vim.tablePage.pageSize =
												res.result.pageSize;
											vim.loading = false;
											resolve(vim);
										})
										.catch(() => {
											vim.loading = false;
											resolve(vim);
										});
								} else {
									resolve(this);
								}
							}
						})
						.catch(() => {
							this.loading = false;
							resolve(this);
						});
				});
			},
			activeRowMethod({ row, rowIndex }) {
				if (row.disabled) {
					return false;
				} else {
					if (row.editDisabled) {
						return false;
					} else {
						return true;
					}
				}
			},
			changeAllEvent() {
				this.setAllCheckboxRow(this.isAllChecked);
				if (!this.isAllChecked) {
					this.clearCheckboxRow();
					this.clearCheckboxReserve();
				}
				if (this.isAllChecked) {
					this.count = this.tablePage.total;
				} else {
					this.count = 0;
				}
			},
			radioChange(data) {
				this.$emit('radio-change', data);
			},
			currentChange(data) {
				this.$emit('current-change', data);
			},
			sortChange(data) {
				if (data.order != null) {
					let item = {};
					item.property = data.property;
					item.order = data.order;
					this.orderList = this.orderList.filter((item) => {
						return item.property != data.property;
					});
					this.orderList.unshift(item);
				} else {
					this.orderList = this.orderList.filter((item) => {
						return item.property != data.property;
					});
				}
				this.$emit('sort-change', data);
				this.$emit('sort-change-c', this.orderList);
			},
			checkboxChange(data) {
				//console.log("选中触发")
				this.setSelectRecords();
				if (!data.checked) {
					this.isAllChecked = false;
				}
				this.$emit('checkbox-change', data);
			},
			checkboxAll(data) {
				//console.log("全选触发")
				this.setSelectRecords();
				if (!data.checked) {
					this.isAllChecked = false;
				}
				this.$emit('checkbox-all', data);
			},
			setSelectRecords() {
				let list = [];
				let thisChecked = this.getCheckboxRecords();
				if (!thisChecked) {
					thisChecked = [];
				} else {
					thisChecked.forEach((item) => {
						list.push(item);
					});
				}
				let selectReserveRecords = this.getCheckboxReserveRecords();
				if (!selectReserveRecords) {
					selectReserveRecords = [];
				} else {
					selectReserveRecords.forEach((item) => {
						list.push(item);
					});
				}

				this.selectRecords = list;
				this.count = list.length;
			},
			cellClick(data) {
				//console.log("单机单元格触发")
				this.$emit('cell-click', data);
			},
			cellDbclick(data) {
				this.$emit('cell-dblclick', data);
			},
			onEditClosed(data) {
				//单元格编辑结束时间
				this.$emit('edit-closed', data);
			},
			//往表格插入临时数据（不支持深层结构），从第一行插入一行或多行新数据
			insert(records) {
				//console.log("新增数据")
				const $grid = this.$refs.zhGrid;
				$grid.insert(records);
			},
			// 在最后一行插入一行或多行数据
			insertLast(records) {
				//console.log("新增数据")
				const $grid = this.$refs.zhGrid;
				$grid.insertAt(records, -1);
			},
			//往表格插入临时数据（不支持深层结构），从指定位置插入一行或多行；第二个参数：row 指定位置、null从第一行插入、-1 从最后插入
			insertAt(records, row) {
				const $grid = this.$refs.zhGrid;
				$grid.insertAt(records, row);
			},
			//只对 keep-source 开启有效，还原指定行 row 或者整个表格的数据
			revertData(rows, field) {
				const $grid = this.$refs.zhGrid;
				$grid.revertData(rows, field);
			},
			//删除指定行数据（不支持深层结构），指定 row 或 [row, ...] 删除多条数据，如果为空则删除所有数据
			remove(rows) {
				const $grid = this.$refs.zhGrid;
				$grid.remove(rows);
			},
			//删除复选框选中的行数据（不支持深层结构）
			removeCheckboxRow() {
				const $grid = this.$refs.zhGrid;
				$grid.removeCheckboxRow();
			},
			//删除单选框选中的行数据（不支持深层结构）
			removeRadioRow() {
				const $grid = this.$refs.zhGrid;
				$grid.removeRadioRow();
			},
			//删除当前行选中的行数据（不支持深层结构）
			removeCurrentRow() {
				const $grid = this.$refs.zhGrid;
				$grid.removeCurrentRow();
			},
			//根据 row 获取相对于 data 中的索引
			getRowIndex(row) {
				const $grid = this.$refs.zhGrid;
				return $grid.getRowIndex(row);
			},
			//获取当前表格的数据（完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据）
			getTableData() {
				const $grid = this.$refs.zhGrid;
				return $grid.getTableData();
			},
			//根据行的唯一主键获取行
			getRowById(rowid) {
				const $grid = this.$refs.zhGrid;
				return $grid.getRowById(rowid);
			},
			//根据行获取行的唯一主键
			getRowid(row) {
				const $grid = this.$refs.zhGrid;
				return $grid.getRowid(row);
			},
			//获取数据，和 data 的行为一致，也可以指定索引获取数据
			getData(rowIndex) {
				const $grid = this.$refs.zhGrid;
				return $grid.getData(rowIndex);
			},
			//获取表格数据集（获取插入、删除、更改的数据，对于增删改查表格非常方便）
			getRecordset() {
				const $grid = this.$refs.zhGrid;
				return $grid.getRecordset();
			},
			//用于 edit-config，获取插入的临时数据
			getInsertRecords() {
				const $grid = this.$refs.zhGrid;
				return $grid.getInsertRecords();
			},
			//获取已删除的数据
			getRemoveRecords() {
				const $grid = this.$refs.zhGrid;
				return $grid.getRemoveRecords();
			},
			//只对 keep-source 开启有效，获取已修改的数据
			getUpdateRecords() {
				const $grid = this.$refs.zhGrid;
				return $grid.getUpdateRecords();
			},
			//	用于 highlight-current-row，获取高亮的当前行数据
			getCurrentRecord() {
				const $grid = this.$refs.zhGrid;
				return $grid.getCurrentRecord();
			},
			//用于 type=radio，获取当前已选中的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据）
			getRadioRecord(isFull) {
				const $grid = this.$refs.zhGrid;
				return $grid.getRadioRecord(isFull);
			},
			//用于 radio-config.reserve，获取已保留选中的行数据（不包含当前列表，如果 isFull=true 则不包含全部列表）
			getRadioReserveRecord(isFull) {
				const $grid = this.$refs.zhGrid;
				return $grid.getRadioReserveRecord(isFull);
			},
			//获取所有勾选的数据，包括当前页和其他页
			getAllCheckboxRecords() {
				return this.selectRecords;
			},
			//用于 type=checkbox，获取当前已选中的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据）
			getCheckboxRecords(isFull) {
				const $grid = this.$refs.zhGrid;
				return $grid.getCheckboxRecords(isFull);
			},
			//用于 checkbox-config.reserve，获取已保留选中的行数据（不包含当前列表，如果 isFull=true 则不包含全部列表）
			getCheckboxReserveRecords(isFull) {
				const $grid = this.$refs.zhGrid;
				return $grid.getCheckboxReserveRecords(isFull);
			},
			//用于 tree-config 和 type=checkbox，获取半选状态的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据）
			getCheckboxIndeterminateRecords(isFull) {
				const $grid = this.$refs.zhGrid;
				return $grid.getCheckboxIndeterminateRecords(isFull);
			},
			//用于 expand-config，用于展开行，获取已展开的行数据
			getRowExpandRecords() {
				const $grid = this.$refs.zhGrid;
				return $grid.getRowExpandRecords();
			},
			//用于 tree-config，用于树表格，获取已展开的节点（注意，即使父节点被收起，只要该节点还处于展开状态都能获取到）
			getTreeExpandRecords() {
				const $grid = this.$refs.zhGrid;
				return $grid.getTreeExpandRecords();
			},
			//用于 edit-config，获取已激活的行数据
			getActiveRecord() {
				const $grid = this.$refs.zhGrid;
				return $grid.getActiveRecord();
			},
			//用于 mouse-config.selected，获取选中的单元格信息
			getSelectedCell() {
				const $grid = this.$refs.zhGrid;
				return $grid.getSelectedCell();
			},
			//用于 type=checkbox，判断列头复选框是否被选中
			isAllCheckboxChecked() {
				const $grid = this.$refs.zhGrid;
				return $grid.isAllCheckboxChecked();
			},
			//用于 edit-config，激活行编辑并激活第一个单元格
			setActiveRow(row) {
				const $grid = this.$refs.zhGrid;
				$grid.setActiveRow(row);
			},
			//用于 edit-config，激活单元格编辑
			setActiveCell(row, fieldOrColumn) {
				const $grid = this.$refs.zhGrid;
				$grid.setActiveCell(row, fieldOrColumn);
			},
			//用于 mouse-config.selected，选中指定的单元格
			setSelectCell(row, fieldOrColumn) {
				const $grid = this.$refs.zhGrid;
				$grid.setSelectCell(row, fieldOrColumn);
			},
			//用于 expand-config，设置展开行，二个参数设置这一行展开与否
			setRowExpand(rows, checked) {
				const $grid = this.$refs.zhGrid;
				$grid.setRowExpand(rows, checked);
			},
			//用于 expand-config，设置所有行的展开与否（如果是关闭所有行，可以使用 clearRowExpand 快速清除）
			setAllRowExpand(checked) {
				const $grid = this.$refs.zhGrid;
				$grid.setAllRowExpand(checked);
			},
			//	用于 tree-config，设置展开树形节点，二个参数设置这一行展开与否
			setTreeExpand(rows, checked) {
				const $grid = this.$refs.zhGrid;
				$grid.setTreeExpand(rows, checked);
			},
			//用于 tree-config，设置所有树节点的展开与否（如果是关闭所有树节点，可以使用 clearTreeExpand 快速清除）
			setAllTreeExpand(checked) {
				const $grid = this.$refs.zhGrid;
				$grid.setAllTreeExpand(checked);
			},
			//	用于 highlight-current-row，设置某一行为高亮状态
			setCurrentRow(row) {
				const $grid = this.$refs.zhGrid;
				$grid.setCurrentRow(row);
			},
			//用于 highlight-current-column，设置某列行为高亮状态
			setCurrentColumn(column) {
				const $grid = this.$refs.zhGrid;
				$grid.setCurrentColumn(column);
			},
			//用于 type=radio 单选框，设置某一行为选中状态
			setRadioRow(row) {
				const $grid = this.$refs.zhGrid;
				$grid.setRadioRow(row);
			},
			//用于 type=checkbox 复选框，设置行为选中状态，第二个参数为选中与否
			setCheckboxRow(rows, checked) {
				const $grid = this.$refs.zhGrid;
				$grid.setCheckboxRow(rows, checked);
			},
			//用于 type=checkbox，设置所有行的选中状态
			setAllCheckboxRow(checked) {
				const $grid = this.$refs.zhGrid;
				$grid.setAllCheckboxRow(checked);
			},
			//用于 type=checkbox，切换某一行的选中状态
			toggleCheckboxRow(row) {
				const $grid = this.$refs.zhGrid;
				$grid.toggleCheckboxRow(row);
			},
			//用于 type=checkbox，切换所有行的选中状态
			toggleAllCheckboxRow() {
				const $grid = this.$refs.zhGrid;
				$grid.toggleAllCheckboxRow();
			},
			//用于 type=expand，切换展开行的状态
			toggleRowExpand(row) {
				const $grid = this.$refs.zhGrid;
				$grid.toggleRowExpand(row);
			},
			//用于 tree-config，切换展开树形节点的状态
			toggleTreeExpand(row) {
				const $grid = this.$refs.zhGrid;
				$grid.toggleTreeExpand(row);
			},
			//用于 highlight-current-row，手动清空当前高亮的状态
			clearCurrentRow() {
				const $grid = this.$refs.zhGrid;
				$grid.clearCurrentRow();
			},
			//用于 highlight-current-column，手动清空当前高亮的状态
			clearCurrentColumn() {
				const $grid = this.$refs.zhGrid;
				$grid.clearCurrentColumn();
			},
			//用于 type=radio，手动清空用户的选择
			clearRadioRow() {
				const $grid = this.$refs.zhGrid;
				$grid.clearRadioRow();
			},
			//用于 radio-config.reserve，手动清空用户保留选中的行数据
			clearRadioReserve() {
				const $grid = this.$refs.zhGrid;
				$grid.clearRadioReserve();
			},
			//用于 type=checkbox，手动清空用户的选择
			clearCheckboxRow() {
				const $grid = this.$refs.zhGrid;
				$grid.clearCheckboxRow();
				this.setSelectRecords();
			},
			//用于 checkbox-config.reserve，手动清空用户保留选中的行数据
			clearCheckboxReserve() {
				const $grid = this.$refs.zhGrid;
				$grid.clearCheckboxReserve();
				this.setSelectRecords();
			},
			//用于 type=expand，手动清空展开行状态，数据会恢复成未展开的状态
			clearRowExpand() {
				const $grid = this.$refs.zhGrid;
				$grid.clearRowExpand();
			},
			//用于 expand-config.lazy，手动清空懒加载展开行的状态，数据会恢复成未展开的状态，当再次展开时会重新加载
			clearRowExpandLoaded(row) {
				const $grid = this.$refs.zhGrid;
				$grid.clearRowExpandLoaded(row);
			},
			//用于 tree-config，手动清空树形节点的展开状态，数据会恢复成未展开的状态
			clearTreeExpand(row) {
				const $grid = this.$refs.zhGrid;
				$grid.clearTreeExpand(row);
			},
			//用于 tree-config.lazy，手动清空懒加载树节点的状态，数据会恢复成未展开的状态，当再次展开时会重新加载
			clearTreeExpandLoaded(row) {
				const $grid = this.$refs.zhGrid;
				$grid.clearTreeExpandLoaded(row);
			},
			//手动清除单元格选中状态
			clearSelected() {
				const $grid = this.$refs.zhGrid;
				$grid.clearSelected();
			},
      //用于 filters，修改筛选列表
      setFilter(fieldOrColumn, options){
        const $grid = this.$refs.zhGrid;
        $grid.setFilter(fieldOrColumn,options);
        // $grid.updateData()
      },
      // 当筛选条件发生变化时会触发该事件
      filterChangeEvent(object) {
        this.$emit('filter-change', object)
      },
      // 根据列的字段名获取列
      getColumnByField(field) {
        const $grid = this.$refs.zhGrid;
        return $grid.getColumnByField(field);
      },
			//手动清除单元格激活状态
			clearActived() {
				const $grid = this.$refs.zhGrid;
				$grid.clearActived();
			},
      // 刷新列配置（对于动态修改属性、显示/隐藏列等场景下可能会用到）
			refreshColumn(timeout) {
				const $grid = this.$refs.zhGrid;
        if(!timeout){
          timeout=0
        }
				setTimeout(() => {
          $grid.reloadColumn(this.columns)
        }, timeout);
			},
      // 手动处理数据，用于手动排序与筛选（对于手动更改了排序、筛选...等条件后需要重新处理数据时可能会用到）
      updateData() {
        const $grid = this.$refs.zhGrid;
        $grid.updateData();
      },
			onCheckMethod({ row }) {
				return !row.disabled;
			},
			exportData(filename, type) {
				const $grid = this.$refs.zhGrid;
				if (!filename) {
					filename = '导出';
				}
				if (!type) {
					type = 'xlsx';
				}
				$grid.exportData({
					filename: filename,
					sheetName: 'Sheet1',
					type: type,
          columnFilterMethod({ column }) {
            const cols = ['operate', 'checkbox']
            return !cols.includes( column.field) ;
          }
				});
			},
		},
	};
</script>
<style lang="less">
	//.zh-table-shadow {
	//	cursor: pointer;
	//	border-color: rgba(0, 0, 0, 0.09);
	//	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
	//}
  //
	//.page-left {
	//	position: absolute;
	//	left: 10px;
	//	top: 50%;
	//	transform: translateY(-50%);
	//	z-index: 10;
	//}
  //
	//.select-count {
	//	display: inline-block;
	//	vertical-align: middle;
	//}
  //
	//.vxe-table--tooltip-wrapper {
	//	z-index: 999;
	//}
  //
	//.zh-table-title {
	//	line-height: 24px;
	//	font-weight: 600;
	//	font-size: 14px;
	//	padding: 0 12px;
  //  color: #fff;
	//}
  //
	//.vxe-toolbar.size--mini {
	//	font-size: 12px;
	//	height: 36px;
	//	color: #fff;
	//	background-color: @primary-4;
	//}
  //
	//.vxe-toolbar.size--small {
	//	font-size: 12px;
	//	height: 36px;
	//	color: #fff;
	//	background-color: @primary-4;
	//}
  //
	//.size--small .vxe-loading .vxe-loading--spinner {
	//	width: 38px;
	//	height: 38px;
	//}
  //
	//.vxe-table--render-default.size--small .vxe-header--column.col--ellipsis,
	//.vxe-table--render-default.size--small .vxe-body--column.col--ellipsis,
	//.vxe-table--render-default.size--small .vxe-footer--column.col--ellipsis,
	//.vxe-table--render-default.vxe-editable.size--small .vxe-body--column {
	//	height: 36px;
	//}
  //
	//.vxe-table--render-default.size--small {
	//	font-size: 12px;
	//}
  //
	//.vxe-table--render-default.size--small .vxe-table--empty-placeholder,
	//.vxe-table--render-default.size--small .vxe-table--empty-block {
	//	min-height: 36px;
	//}
  //
	//.vxe-table--render-default.size--small
	//	.vxe-header--column:not(.col--ellipsis),
	//.vxe-table--render-default.size--small
	//	.vxe-body--column:not(.col--ellipsis),
	//.vxe-table--render-default.size--small
	//	.vxe-footer--column:not(.col--ellipsis) {
	//	padding: 6px 0;
	//}
  //
	//.vxe-table--render-default.size--small .vxe-cell .vxe-default-input,
	//.vxe-table--render-default.size--small .vxe-cell .vxe-default-textarea,
	//.vxe-table--render-default.size--small .vxe-cell .vxe-default-select {
	//	height: 28px;
	//}
  //
	//.vxe-table--render-default.size--small
	//	.vxe-cell
	//	.vxe-default-input[type='date']::-webkit-inner-spin-button {
	//	margin-top: 1px;
	//}
  //
	//.vxe-table--render-default.size--small
	//	.vxe-header--column.col--ellipsis
	//	> .vxe-cell,
	//.vxe-table--render-default.size--small
	//	.vxe-body--column.col--ellipsis
	//	> .vxe-cell,
	//.vxe-table--render-default.size--small
	//	.vxe-footer--column.col--ellipsis
	//	> .vxe-cell {
	//	max-height: 36px;
	//}
  //
	//.vxe-table--render-default {
	//	.vxe-table--body-wrapper {
  //    background-color: @body-background;
  //    color: @text-color;
	//	}
  //
	//	&.border--default,
	//	&.border--full,
	//	&.border--outer {
	//		.vxe-table--header-wrapper {
	//			color: #fff;
	//		}
	//	}
  //
	//	&.column--highlight {
	//		.vxe-header--column {
	//			&:not(.col--seq) {
	//				&:hover {
	//					color: @body-background;
	//					background-color: @primary-2;
	//				}
	//			}
	//		}
	//	}
  //
	//	.vxe-header--column {
	//		&.col--current {
	//			color: @primary-color;
	//			background-color: @primary-2;
	//		}
	//	}
  //
	//	.vxe-body--column,
	//	.vxe-footer--column {
	//		&.col--current {
	//			background-color: @primary-2;
	//		}
	//	}
  //
	//	.vxe-body--row {
	//		&.row--stripe {
	//		background-color: @layout-body-background;
	//		}
	//		&.row--radio {
	//			background-color: @primary-2;
	//		}
  //
	//		&.row--checked {
	//			background-color: @primary-2;
	//		}
  //
	//		&.row--current {
	//			background-color: @primary-2;
	//		}
  //
	//		&.row--hover {
	//			background-color: @primary-1;
  //
	//			&.row--stripe {
	//				background-color: @primary-1;
	//			}
  //
	//			&.row--radio {
	//				background-color: @primary-1;
	//			}
  //
	//			&.row--checked {
	//				background-color: @primary-1;
	//			}
  //
	//			&.row--current {
	//				background-color: @primary-1;
	//			}
	//		}
	//	}
  //
	//	.is--checked.vxe-cell--checkbox,
	//	.is--indeterminate.vxe-cell--checkbox {
	//		color: @primary-color;
	//	}
  //
	//	.is--checked.vxe-cell--checkbox .vxe-checkbox--icon:before,
	//	.is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon:before {
	//		border-color: @primary-color;
	//		background-color: @primary-color;
	//	}
  //
	//	.is--checked.vxe-cell--checkbox .vxe-checkbox--checked-icon:after {
	//		content: '';
	//		position: absolute;
	//		height: 0.64em !important;
	//		width: 0.32em !important;
	//		top: 50% !important;
	//		left: 50% !important;
	//		border: 2px solid #fff;
	//		border-left: 0 !important;
	//		border-top: 0 !important;
	//		-webkit-transform: translate(-50%, -50%) rotate(45deg);
	//		transform: translate(-50%, -50%) rotate(45deg);
	//	}
  //
	//	.vxe-cell--checkbox:not(.is--disabled):hover
	//		.vxe-checkbox--icon:before {
	//		border-color: @primary-color;
	//	}
  //
	//	.is--checked.vxe-cell--radio {
	//		color: @primary-color;
	//	}
  //
	//	.is--checked.vxe-cell--radio .vxe-radio--checked-icon:before {
	//		border-color: @primary-color;
	//		background-color: @primary-color;
	//	}
  //
	//	.vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon:before {
	//		border-color: @primary-color;
	//	}
	//}
  //
	//.vxe-primary-color {
	//	color: @primary-color;
	//}
  //
	//.is--checked.vxe-custom--option,
	//.is--indeterminate.vxe-custom--option {
	//	color: @primary-color;
	//}
  //
	//.is--checked.vxe-custom--option .vxe-checkbox--icon:before,
	//.is--indeterminate.vxe-custom--option .vxe-checkbox--icon:before {
	//	border-color: @primary-color;
	//	background-color: @primary-color;
	//}
  //
	//.vxe-custom--option:not(.is--disabled):hover .vxe-checkbox--icon:before {
	//	border-color: @primary-color;
	//}
  //
	//.vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer button:hover {
	//	color: @primary-color;
	//}
  //
	//.vxe-cell .vxe-default-input:focus,
	//.vxe-cell .vxe-default-textarea:focus,
	//.vxe-cell .vxe-default-select:focus,
	//.vxe-table--filter-wrapper .vxe-default-input:focus,
	//.vxe-table--filter-wrapper .vxe-default-textarea:focus,
	//.vxe-table--filter-wrapper .vxe-default-select:focus {
	//	border: 1px solid @primary-color;
	//}
  //
	//.vxe-table--render-default .vxe-table--resizable-bar:before {
	//	background-color: @primary-color;
	//}
  //
	//.vxe-loading .vxe-loading--spinner:before,
	//.vxe-loading .vxe-loading--spinner:after {
	//	background-color: @primary-color;
	//}
  //
	//.vxe-table--cell-area > .vxe-table--cell-main-area {
	//	background-color: @primary-7;
	//	border: 1px solid @primary-color;
	//}
  //
	//.vxe-table--cell-area .vxe-table--cell-main-area-btn {
	//	background-color: @primary-color;
	//}
  //
	//.vxe-toolbar .vxe-custom--wrapper > .vxe-button:hover {
	//	color: @primary-color;
	//	border: 1px solid @primary-color;
	//	-webkit-box-shadow: 0 1px 6px @primary-color;
	//	box-shadow: 0 1px 6px @primary-color;
	//}
  //
	//.vxe-toolbar .vxe-custom--wrapper > .vxe-button:focus {
	//	border: 1px solid @primary-color;
	//	-webkit-box-shadow: 0 1px 6px @primary-color;
	//	box-shadow: 0 1px 6px @primary-color;
	//}
  //
	//.vxe-toolbar .vxe-custom--wrapper.is--active > .vxe-button {
	//	background-color: @primary-color;
	//	color: #fff;
	//	border: 1px solid @primary-color;
	//	-webkit-box-shadow: 0 1px 6px @primary-color;
	//	box-shadow: 0 1px 6px @primary-color;
	//}
  //
	//.vxe-table--cell-area .vxe-table--cell-extend-area {
	//	border: 2px solid @primary-color;
	//}
  //
	//.vxe-pager {
	//	.vxe-pager--jump .vxe-pager--goto {
	//		&:focus {
	//			border: 1px solid @primary-color;
	//			outline: 0;
	//		}
	//	}
  //
	//	.vxe-pager--prev-btn,
	//	.vxe-pager--next-btn,
	//	.vxe-pager--num-btn,
	//	.vxe-pager--jump-prev,
	//	.vxe-pager--jump-next {
	//		&:not(.is--disabled) {
	//			&:focus {
	//				box-shadow: 0 0 0.25em 0 @primary-color;
	//			}
  //
	//			&.is--active,
	//			&:hover {
	//				color: lighten(@primary-color, 6%);
	//			}
  //
	//			&:active {
	//				color: #fff;
	//				background-color: darken(@primary-color, 3%);
	//			}
	//		}
	//	}
  //
	//	&.is--border {
	//		.vxe-pager--num-btn {
	//			&.is--active {
	//				border-color: @primary-color;
	//			}
	//		}
	//	}
  //
	//	.vxe-pager--total,
	//	.vxe-pager--sizes,
	//	.vxe-pager--count {
	//		color: @primary-color;
	//	}
  //
	//	&.is--background,
	//	&.is--perfect {
	//		.vxe-pager--jump-prev,
	//		.vxe-pager--num-btn,
	//		.vxe-pager--jump-next {
	//			&:not(.is--disabled) {
	//				&.is--active {
	//					color: #fff;
	//					background-color: @primary-color;
  //
	//					&:hover {
	//						background-color: lighten(@primary-color, 6%);
	//					}
  //
	//					&:focus {
	//						border-color: @primary-color;
	//					}
  //
	//					&:active {
	//						border-color: darken(@primary-color, 3%);
	//						background-color: darken(@primary-color, 3%);
	//					}
	//				}
	//			}
	//		}
	//	}
  //
	//	.vxe-select {
	//		&.is--active {
	//			& > .vxe-input {
	//				.vxe-input--inner {
	//					border: 1px solid @primary-color;
	//				}
	//			}
	//		}
	//	}
  //
	//	.vxe-select-option {
	//		&.is--selected {
	//			color: @primary-color;
	//		}
  //
	//		&:not(.is--disabled) {
	//			cursor: pointer;
  //
	//			&.is--hover {
	//				background-color: @primary-2;
	//			}
	//		}
	//	}
	//}
  //
	//.vxe-input {
	//	&:not(.is--disabled) {
	//		&.is--active {
	//			.vxe-input--inner {
	//				border: 1px solid @primary-color;
	//			}
	//		}
	//	}
	//}
  //
	//.vxe-checkbox > input:checked + .vxe-checkbox--icon {
	//	background-color: @primary-color;
	//	border-color: @primary-color;
	//}
  //
	//.vxe-checkbox > input:checked + .vxe-checkbox--icon + .vxe-checkbox--label {
	//	color: @primary-color;
	//}
  //
	//.vxe-checkbox.is--indeterminate
	//	> input:not(:checked)
	//	+ .vxe-checkbox--icon {
	//	background-color: @primary-color;
	//	border-color: @primary-color;
	//}
  //
	//.vxe-checkbox:not(.is--disabled) > input:focus + .vxe-checkbox--icon {
	//	border-color: @primary-color;
	//	-webkit-box-shadow: 0 0 0.2em 0 @primary-color;
	//	box-shadow: 0 0 0.2em 0 @primary-color;
	//}
  //
	//.vxe-checkbox:not(.is--disabled):hover > input + .vxe-checkbox--icon {
	//	border-color: @primary-color;
	//}
  //
	//.zh-table-light {
	//	.vxe-table--render-default {
	//		.vxe-table--body-wrapper {
	//			color: @text-color;
	//		}
  //
	//		&.border--default,
	//		&.border--full,
	//		&.border--outer {
	//			.vxe-table--header-wrapper {
	//				background-color: @background-color-light;
	//				color: rgba(0, 0, 0, 0.65);
	//			}
	//		}
	//	}
	//}
</style>
